Skip to content

feat(renderers): Add React Native renderer #430

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
sivamrudram-eng wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(renderers): Add React Native renderer #430

sivamrudram-eng wants to merge 4 commits into from

Conversation

@sivamrudram-eng
Copy link

@sivamrudram-eng sivamrudram-eng commented Jan 5, 2026

Summary

This PR adds the first React Native implementation of the A2UI renderer, enabling A2UI-compliant agents to generate native mobile UIs on iOS and Android.

Features

Core Components

  • A2UIRenderer - Main component for rendering A2UI specifications
  • useA2UIStream - Hook for real-time streaming from agent servers

MVP Components (8 of 16)

Component React Native Mapping Status
Text <Text> ✅
Button <Pressable> ✅
Image <Image> ✅
Row <View flexDirection="row"> ✅
Column <View> ✅
Card <View> with shadow ✅
List <FlatList> ✅
TextField <TextInput> ✅

Infrastructure

  • JSONL stream parser for real-time updates
  • Message dispatcher for A2UI protocol messages
  • Surface registry and component buffer for state management
  • Data binding support with BoundValue resolution
  • Full TypeScript support

Usage Example

import { A2UIRenderer } from "@a2ui/react-native";

const App = () => {
  const spec = {
    surfaceId: "main",
    rootId: "root",
    components: [
      { id: "root", type: "Column", children: ["text1", "btn1"] },
      { id: "text1", type: "Text", content: "Hello A2UI!" },
      { id: "btn1", type: "Button", label: "Click me", action: "doSomething" },
    ],
  };

  return <A2UIRenderer spec={spec} onAction={handleAction} />;
};

Roadmap

  • Add remaining components (Modal, Tabs, Slider, etc.)
  • Add comprehensive test suite
  • Publish to npm as @a2ui/react-native

Implements #428

Standalone Repository

This renderer is also available as a standalone package at:
https://github.com/sivamrudram-eng/a2ui-react-native

@sivamrudram-eng
feat(renderers): Add React Native renderer
6c2aba4 
Add first React Native implementation of A2UI renderer with:

- Core A2UIRenderer component for rendering A2UI specs
- 8 MVP components: Text, Button, Image, Row, Column, Card, List, TextField
- JSONL stream parser for real-time updates
- Message dispatcher for A2UI protocol messages
- Surface registry and component buffer for state management
- Data binding support with BoundValue resolution
- useA2UIStream hook for streaming from agent servers
- Full TypeScript support

Implements google#428
@google-cla
Copy link

google-cla bot commented Jan 5, 2026

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@sivamrudram-eng
Copy link
Author

sivamrudram-eng commented Jan 5, 2026

I have signed the CLA. Please re-check.

@sivamrudram-eng
chore: trigger CLA recheck
785f0cd
@sivamrudram-eng
feat(react-native): Add complete component set and theming
45a83fd 
Added new components matching Angular renderer:
- Modal, Tabs, Checkbox, Slider, DateTimeInput
- MultipleChoice, Icon, Divider, Video, AudioPlayer

Added theming system with light/dark themes.
Added example apps demonstrating all components.
Updated README with full documentation.
@sivamrudram-eng
Add comprehensive unit test suite for React Native renderer
d15568d 
- Add Jest configuration with ts-jest for TypeScript ESM support
- Add JSONL parser tests (basic parsing, chunked input, error handling)
- Add data model store tests (type guards, path operations, resolvers)
- Add message dispatcher tests (message routing, lifecycle hooks)
- Add component buffer tests (CRUD ops, tree traversal, search)
- Add surface registry tests (surface lifecycle, subscriptions)
- Update ESLint config to recognize Jest test environment
- 130 tests covering all core modules
@github-project-automation github-project-automation bot moved this to Todo in A2UI Jan 20, 2026
@jacobsimionato jacobsimionato added the triage backlog The backlog of issues and PRs which need to be triaged in bulk. label Jan 20, 2026
@zeroasterisk zeroasterisk added component: react renderer and removed triage backlog The backlog of issues and PRs which need to be triaged in bulk. labels Jan 28, 2026
@zeroasterisk
Copy link
Collaborator

zeroasterisk commented Jan 28, 2026

Nice work @sivamrudram-eng

@ataibarkai is leading the effort for an A2UI react renderer.

Atai and CopilotKit team, can you please review this PR and see what you might want for the official implementation?

Regardless of the outcome (because I think Atai and team are kind of far into their work) we would welcome your future contributions and refinements to make the A2UI react renderer better. We also have a v0.9 spec ~done and there will be improvements to each of these renderers to support v0.9, possibly backwards compatibility, certainly better decoupling of transport and shared library functions... lots more stuff to do :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@zeroasterisk zeroasterisk Awaiting requested review from zeroasterisk

@ataibarkai ataibarkai Awaiting requested review from ataibarkai

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

component: react renderer P2

Projects

A2UI
Status: Todo

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@sivamrudram-eng @zeroasterisk @jacobsimionato